<template>
  <div class="chart" :id="props.id"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'

// 接受参数id
const props = defineProps({
  id: {
    type: String,
    default: 'chart',
  },
})

onMounted(() => {
  const chartDom = document.getElementById(props.id)
  const myChart = echarts.init(chartDom)

  const data = []
  for (let i = 0; i <= 100; i++) {
    const theta = (i / 100) * 360
    const r = 5 * (1 + Math.sin((theta / 180) * Math.PI))
    data.push([r, theta])
  }
  const option = {
    polar: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    angleAxis: {
      type: 'value',
      startAngle: 0,
    },
    radiusAxis: {},
    series: [
      {
        coordinateSystem: 'polar',
        name: 'line',
        type: 'line',
        data: data,
      },
    ],
  }

  myChart.setOption(option)
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
